<template>
    <div class="preview-item model-poster-preview" ref="preview"  :style="boxStyle">
        <div class="model-poster-item-list" :style="listStyle" >
            <div class="model-poster-item"  v-for="(item,index) in config.list" :class="[position[index] && position[index]=='100%'?'hide':'',config.dir]" :style="{'--position':position[index]??'100%','zIndex':index}" :key="index">
                <img :src="item.image" />
            </div>
        </div>
        <div class="indicator-box" v-if="config.indicatorDots">
            <div class="indicator-item" v-for="(item,index) in config.list" :class="{'active':index==current}" :key="index"></div>
        </div>
    </div>
</template>

<script>
import previewMixin from '../../previewMixin.js';
import image1 from './example/1.png';
import image2 from './example/2.png';
import image3 from './example/3.png';
import defaultConfig from './defaultConfig.js';
export default{
    mixins:[previewMixin],
    data(){

        let config = JSON.parse(JSON.stringify(defaultConfig));
        config.list = [];
        config.list.push({'image':image1,'url':''});
        config.list.push({'image':image2,'url':''});
        config.list.push({'image':image3,'url':''});
        
        return {
            config,
            current:0,
            timer:0,
            position:[0]
        }
    },
    computed:{
        boxStyle(){
            let style = {};
            style.height = this.config.height;

            if (this.config.radius){
                style.borderRadius = this.config.radius;
            }


            if (this.config.imageMode){
                switch(this.config.imageMode){
                    case 'aspectFill':
                        style['--image-fit'] = 'cover';
                        break;
                    case 'aspectFit':
                        style['--image-fit'] = 'contain';
                        break;
                    case 'scaleToFill':
                        style['--image-fit'] = 'fill';
                        break;
                    case 'center':
                       style['--image-fit'] = 'none';
                    break;
                }
            }

            if (this.config.duration){
                style['--config-duration'] = (this.config.duration)/1000 + 's';
            }
            
            if (this.config.indicatorColor){
                style['--indicator-color'] =this.config.indicatorColor;
            }

            if (this.config.indicatorActiveColor){
                style['--indicator-active-color'] =this.config.indicatorActiveColor;
            }
            
            return style;
        },
        listStyle(){
            let style = {};
            return style;
        },
        
    },
    methods:{
        nextItem(){

            if (this.config.list.length==1){
                this.position[0] = '0%';
                this.current = 0;
                return;
            }

            this.current =  this.current == this.config.list.length - 1 ? 0 : this.current + 1;

            this.config.list.map((item,index)=>{
                this.position[index] =  '100%';
            });
            this.position[this.current] = '0%';

            let upIndex = this.current == 0 ? this.config.list.length - 1 : this.current - 1;
           
            this.position[upIndex] = '-100%';

            clearTimeout(this.timer);
            if (this.config.autoplay){
                this.timer = setTimeout(()=>{
                    this.position[upIndex] = '100%';
                    this.timer = setTimeout(()=>{
                        this.nextItem();
                    },this.config.interval);
                },this.config.duration);
            }
        },
        setParam(param){
            
            if ( param && param.list){
               let emtpy = true;
               param.list.map((item,index)=>{
                   if (item.image && item.image != ''){
                       item.image = this.$uploadUrl(item.image);
                       emtpy = false;
                   }
               });
               if (emtpy) delete param.list;
            }
            this.$assign(this.config,param);
            
            if (this.config.autoplay){
                this.nextItem();
            }else{
                clearTimeout(this.timer);
            }
            
        }
    },
    
}
</script>

<style>
.model-poster-preview{
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 300px;
    --image-fit:cover;
    --config-duration:0.5s;
    --indicator-color:#fff;
    --indicator-active-color:#ff6700;
}

.model-poster-preview .indicator-box{
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.model-poster-preview .indicator-box .indicator-item{
    width: 20px;
    height: 20px;
    background-color: var(--indicator-color);
    border-radius: 50%;
    margin: 0 5px;
}

.model-poster-preview .indicator-box .indicator-item.active{
    background-color: var(--indicator-active-color);
}



.model-poster-item-list{
    width: 100%;
    height: 100%;
    position: relative;
    --position:100%;
    overflow: hidden;
}
.model-poster-item{
    width: 100%;
    height: 100%;
    
    position: absolute;
    transition:left var(--config-duration),top var(--config-duration);
    opacity: 1;
}


.model-poster-item.horizontal{
    left: var(--position);
    top: 0;
}

.model-poster-item.vertical{
    top: var(--position);
    left: 0;
}

.model-poster-item.hide{
    opacity: 0;
}

.model-poster-item img{
    width: 100%;
    height: 100%;
    object-fit:var(--image-fit);
}

</style>